<template>
    <div class="container-box-container">
        <el-row :gutter="20">
            <el-col :span="24">
                <div class="integralStatistics">
                    <div class="mainBackgroundColor marginBottom24 border-radius8 overflowHidden">
                        <div class="fontSize16 colorMain borderBottom006 fontWeight500 title">
                            积分数据统计
                            <el-date-picker
                                    v-model="time"
                                    type="datetimerange"
                                    size="mini"
                                    class="floatRight"
                                    @change="changeTime"
                                    :picker-options="pickerOptions"
                                    style="margin-top: 14px"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                        <div style="padding: 28px 0" class="width-20 floatLeft">
                            <div class="borderRight006 flex-box flex-align-items-center flex-center paddingMedia2">
                                <div class="inline-block" style="width: 44px;height: 44px;border-radius: 50%;margin-right: 20px">
                                    <img class="imgWidth" style="width: 44px;" src="../../../../src/images/uiImages/integral/unCount.png" alt="">
                                </div>
                                <div class="inline-block">
                                    <p class="margin0 fontSize14">待发放积分总数</p>
                                    <p class="fontSize30 colorMain fontWeightBold" style="margin: 12px 0 0 0">{{waitTotal ? waitTotal : 0}}</p>
                                </div>
                            </div>
                        </div>
                        <div style="padding: 28px 0" class="width-20 floatLeft">
                            <div class="borderRight006 flex-box flex-align-items-center flex-center paddingMedia2">
                                <div class="inline-block" style="width: 44px;height: 44px;border-radius: 50%;margin-right: 20px">
                                    <img class="imgWidth" style="width: 44px;" src="../../../../src/images/uiImages/integral/integral.png" alt="">
                                </div>
                                <div class="inline-block">
                                    <p class="margin0 fontSize14">积分发放总数</p>
                                    <p class="fontSize30 colorMain fontWeightBold" style="margin: 12px 0 0 0">{{total.incomeTotal ? total.incomeTotal : 0}}</p>
                                </div>
                            </div>
                        </div>
                        <div style="padding: 28px 0" class="width-20 floatLeft">
                            <div class="borderRight006 flex-box flex-align-items-center flex-center paddingMedia2">
                                <div class="inline-block" style="width: 44px;height: 44px;border-radius: 50%;margin-right: 20px">
                                    <img class="imgWidth" style="width: 44px;" src="../../../../src/images/uiImages/integral/integral-2.png" alt="">
                                </div>
                                <div class="inline-block">
                                    <p class="margin0 fontSize14">积分发放次数</p>
                                    <p class="fontSize30 colorMain fontWeightBold" style="margin: 12px 0 0 0">{{total.incomeCount ? total.incomeCount : 0}} <span class="fontSize12">次</span></p>
                                </div>
                            </div>
                        </div>
                        <div style="padding: 28px 0" class="width-20 floatLeft">
                            <div class="borderRight006 flex-box flex-align-items-center flex-center paddingMedia2">
                                <div class="inline-block" style="width: 44px;height: 44px;border-radius: 50%;margin-right: 20px">
                                    <img class="imgWidth" style="width: 44px;" src="../../../../src/images/uiImages/integral/integral-3.png" alt="">
                                </div>
                                <div class="inline-block">
                                    <p class="margin0 fontSize14">积分兑换总数</p>
                                    <p class="fontSize30 colorMain fontWeightBold" style="margin: 12px 0 0 0">{{total.expendTotal ? total.expendTotal : 0}}</p>
                                </div>
                            </div>
                        </div>
                        <div style="padding: 28px 0" class="width-20 inline-block">
                            <div class="flex-box flex-align-items-center flex-center paddingMedia2">
                                <div class="inline-block" style="width: 44px;height: 44px;border-radius: 50%;margin-right: 20px">
                                    <img class="imgWidth" style="width: 44px;" src="../../../../src/images/uiImages/integral/integral-4.png" alt="">
                                </div>
                                <div class="inline-block">
                                    <p class="margin0 fontSize14">积分兑换次数</p>
                                    <p class="fontSize30 colorMain fontWeightBold" style="margin: 12px 0 0 0">{{total.expendCount ? total.expendCount : 0}} <span class="fontSize12">次</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>

            <el-col :span="10">
                <div class="integralStatistics">
                    <div class="mainBackgroundColor marginBottom24 border-radius8">
                        <div class="fontSize16 colorMain borderBottom006 fontWeight500 title">积分发放统计</div>
                        <div class="flex-box flex-center flex-direction-column flex-align-items-center">
                            <div class="padding24 width-100" id="chart1" style="height: 320px;"></div>
                            <div v-if="!isGrantYuan" class="padding24 flex-box flex-center flex-direction-column flex-align-items-center width-100" style="height: 280px;position: absolute">
                                <div>
                                    <img style="width: 150px;" src="../../../../src/images/uiImages/none-data.png" alt="">
                                </div>
                                <p class="fontSize14 marginTop10" style="color: #9096A1">暂无数据</p>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>

            <el-col :span="14">
                <div class="integralStatistics">
                    <div class="mainBackgroundColor marginBottom24 border-radius8">
                        <div class="fontSize16 colorMain borderBottom006 fontWeight500 title">
                            积分发放统计
                        </div>
                        <div class="flex-box flex-center flex-direction-column flex-align-items-center">
                            <div class="padding24 width-100" id="chart3" style="height: 320px;"></div>
                        </div>
                    </div>
                </div>
            </el-col>

            <el-col :span="10">
                <div class="integralStatistics">
                    <div class="mainBackgroundColor marginBottom24 border-radius8">
                        <div class="fontSize16 colorMain borderBottom006 fontWeight500 title">积分兑换统计</div>
                        <div class="flex-box flex-center flex-direction-column flex-align-items-center">
                            <div class="padding24 width-100" id="chart2" style="height: 320px;"></div>
                            <div v-if="!isExchangeYuan" class="padding24 flex-box flex-direction-column flex-center flex-align-items-center width-100" style="height: 280px;position: absolute">
                                <div>
                                    <img style="width: 150px;" src="../../../../src/images/uiImages/none-data.png" alt="">
                                </div>
                                <p class="fontSize14 marginTop10" style="color: #9096A1">暂无数据</p>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>

            <el-col :span="14">
                <div class="integralStatistics">
                    <div class="mainBackgroundColor marginBottom24 border-radius8">
                        <div class="fontSize16 colorMain borderBottom006 fontWeight500 title">
                            积分兑换统计
                        </div>
                        <div class="flex-box flex-center flex-direction-column flex-align-items-center">
                            <div class="padding24 width-100" id="chart4" style="height: 320px;"></div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    import {pointExpend ,pointExpendRate ,pointIncomeRate ,pointIncome ,pointExpendLine ,pointIncomeLine ,pointAct} from "src/api/homeApi";
    export default {
        name: "IntegralStatistics",
        data(){
            return{
                time:"",
                time1:"",
                //积分发放饼图
                grantYuan:{
                    outside:[],
                    within:[]
                },
                //积分兑换饼图
                exchangeYuan:{
                    outside:[],
                    within:[]
                },
                isGrantYuan:false,
                isExchangeYuan:false,
                objPie0:{},
                objPie1:{},
                total:{},
                pickerOptions:{},
                cuttentTime:"",
                waitTotal:0
            }
        },
        computed:{

        },
        mounted(){

            this.showInitChart1();
            this.showInitChart2();
            this.pointIncomeLine();
            this.pointExpendLine();
            this.pointAct()
            this.waitAct()

            this. pickerOptions = {
                onPick: ({ maxDate, minDate }) => {
                    this.cuttentTime = minDate.getTime();
                    if (maxDate) {
                        this.cuttentTime = "";
                    }
                },
                //     disabledDate: (time) => {
                //     if (time.getTime() > Date.now()) {
                //         return true;
                //     }

                //     if (this.cuttentTime != "") {
                //         const one = 30 * 24 * 3600 * 1000;
                //         const minTime = this.cuttentTime - one;
                //         const maxTime = this.cuttentTime + one;
                //         return time.getTime() < minTime || time.getTime() > maxTime;   //选择日期范围为一个月
                //     }
                // },
            }
        },
        methods:{
            pointAct(startTime,endTime) {
                pointAct({startTime:startTime ? startTime : "",endTime:endTime ? endTime : ""}).then(response => {
                    if(response.code == 20000){
                        this.total = response.data;
                    }
                })
            },
            waitAct(startTime,endTime) {
                waitAct({startTime:startTime ? startTime : "",endTime:endTime ? endTime : ""}).then(response => {
                    if(response.code == 20000){
                        this.waitTotal = response.data;
                    }
                })
            },
            showInitChart1(startTime,endTime){
                // 积分发放饼图
                Promise.all([this.pointIncome(startTime,endTime)]).then(res=>{
                    this.isGrantYuan = true;
                    setTimeout(()=>{
                        this.initChart1(res);
                    },100)
                    if(res[0].data.length == 0){
                        this.isGrantYuan = false;
                    }
                }).catch(()=>{
                    this.isGrantYuan = false;
                });
            },
            showInitChart2(startTime,endTime){
                //积分兑换饼图
                Promise.all([this.pointExpend(startTime,endTime)]).then(res=>{
                    this.isExchangeYuan = true;
                    setTimeout(()=>{
                        this.initChart2(res);
                    },100)
                    if(res[0].data.length == 0){
                        this.isExchangeYuan = false;
                    }
                }).catch(()=>{
                    this.isExchangeYuan = false;
                });
            },

            pointIncomeRate(startTime,endTime) {
                return new Promise((resolve, reject) => {
                    pointIncomeRate({startTime:startTime ? startTime : "",endTime:endTime ? endTime : ""}).then(response => {
                        if(response.code == 20000){
                            resolve(response)
                        }
                    }).catch((err)=>{
                        reject(err)
                    });
                })
            },
            pointIncome(startTime,endTime) {
                return new Promise((resolve, reject) => {
                    pointIncome({startTime:startTime ? startTime : "",endTime:endTime ? endTime : ""}).then(response => {
                        if(response.code == 20000){
                            resolve(response)
                        }
                    }).catch((err)=>{
                        reject(err)
                    });
                })
            },

            pointExpendRate(startTime,endTime){
                return new Promise((resolve, reject) => {
                    pointExpendRate({startTime:startTime ? startTime : "",endTime:endTime ? endTime : ""}).then(response => {
                        if(response.code == 20000){
                            resolve(response)
                        }
                    }).catch((err)=>{
                        reject(err)
                    });
                })
            },

            pointExpend(startTime,endTime){
                return new Promise((resolve, reject) => {
                    pointExpend({startTime:startTime ? startTime : "",endTime:endTime ? endTime : ""}).then(response => {
                        if(response.code == 20000){
                            resolve(response)
                        }
                    }).catch((err)=>{
                        reject(err)
                    });
                })
            },
            // 发放折线图
            pointIncomeLine(startTime,endTime){
                pointIncomeLine({startTime:startTime ? startTime : "",endTime:endTime ? endTime : ""}).then(response => {
                    if(response.code == 20000 && response.data) {
                        this.initChart3(response.data.dates,response.data.list);
                        this.time = [response.data.dates[0],response.data.dates[response.data.dates.length-1]]
                    }
                })
            },
            // 兑换折线图
            pointExpendLine(startTime,endTime){
                pointExpendLine({startTime:startTime ? startTime : "",endTime:endTime ? endTime : ""}).then(response => {
                    if(response.code == 20000) {
                        this.initChart4(response.data.dates,response.data.list);
                    }
                })
            },
            changeTime(data){
                let startTime = data[0];
                let endTime = data[1];
                this.showInitChart1(startTime,endTime);
                this.showInitChart2(startTime,endTime);

                this.pointIncomeLine(startTime,endTime);
                this.pointExpendLine(startTime,endTime);
                this.pointAct(startTime,endTime);
                this.waitAct(startTime,endTime)
            },

            initChart1(data){
                let dom = document.getElementById("chart1");
                let myChart = echarts.init(dom);
                let color = ['#62A1E1', '#5BD285','#FCDB55'];
                let color1 = ['#6E85CF','#6E9ECF', '#97BFE7', '#B1D5F9', '#7DDB9F', '#96ECB6', '#F1C40B' ,'#FCDB55'];
                this.setCircleChart(myChart,data,color,color1);
            },
            initChart2(data){
                let dom = document.getElementById("chart2");
                let myChart = echarts.init(dom);
                let color = ['#FCCA55', '#86E4E4','#97CCFC'];
                let color1 = ['#975FE5','#FCDB55', '#F47A8F', '#54D3D3', '#57AFFF', '#79EFE3', '#FFCE6B' ,'#FFC694'];
                this.setCircleChart(myChart,data,color,color1);
            },
            setCircleChart(myChart,data,color,color1){
                let option;
                let that = this;
                myChart.clear();
                if(data[0].data.length > 0){
                    option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            type: 'scroll',
                            orient: 'vertical',
                            right: '0%',
                            top:'center',
                            icon: "circle",   //  这个字段控制形状  类型包括 circle 圆形，triangle 三角形，diamond 四边形，arrow 变异三角形，none 无
                            itemWidth: 8,  // 设置宽度
                            itemHeight: 8, // 设置高度
                            itemGap:16, //间距
                            textStyle:{
                                padding: [0,0,0,6],
                                color:'rgba(0, 0, 0, 0.65)',
                                fontSize:14
                            },
                            formatter(name) { // name 是模块的名字
                                return name + ' ' + ' | ' + ' ' + that.objPie1[name] + ' ' + ' '+ ' '+ ' ' + that.objPie0[name];
                            }
                        },
                        series: [
                            {
                                name: '积分来源',
                                type: 'pie',
                                // selectedMode: 'single',
                                showEmptyCircle:false,
                                radius: [0, '50%'],
                                label: {
                                    position: 'inner',
                                    fontSize: 14,
                                    formatter: '{b} \n {d}%'
                                },
                                right: '40%',
                                color:color,
                                labelLine: {
                                    show: false
                                },
                                data: []
                            },
                            {
                                name: '积分来源',
                                type: 'pie',
                                radius: ['60%', '80%'],
                                showEmptyCircle:false,
                                labelLine: {
                                    length: 30
                                },
                                right: '40%',
                                label: {
                                    show:false,
                                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                    backgroundColor: '#F6F8FC',
                                    borderColor: '#8C8D8E',
                                    borderWidth: 1,
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: '#6E7079',
                                            lineHeight: 22,
                                            align: 'center'
                                        },
                                        hr: {
                                            borderColor: '#8C8D8E',
                                            width: '100%',
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        b: {
                                            color: '#4C5058',
                                            fontSize: 14,
                                            fontWeight: 'bold',
                                            lineHeight: 33
                                        },
                                        per: {
                                            color: '#fff',
                                            backgroundColor: '#4C5058',
                                            padding: [3, 4],
                                            borderRadius: 4
                                        }
                                    }
                                },
                                color:color1,
                                data: []
                            }
                        ]
                    };

                    let within = [];
                    let outside = [];
                    let value = 0;
                    let value1 = 0;
                    data[0].data.forEach((item)=>{
                        within.push({
                            name: item.name,
                            value: item.value
                        });
                        value = Number(item.value) + value;
                        this.objPie0[item.name] = item.value;
                        JSON.parse(item.children).forEach((item1)=>{
                            value1 = Number(item1.value) + value1;
                            this.objPie0[item1.name] = item1.value;
                            outside.push({
                                name: item1.name,
                                value: item1.value
                            })
                        })
                    });

                    option.series[0].data = within;
                    option.series[1].data = outside;
                    option.series[0].data.forEach((item)=>{
                        if(value == 0){
                            this.objPie1[item.name] = '0%'
                        }else {
                            if(String(Number(item.value) / value * 100 ).indexOf(".") == -1){
                                this.objPie1[item.name] = Number(item.value) / value * 100 + '%'
                            }else {
                                this.objPie1[item.name] = (Number(item.value) / value * 100).toFixed(2) + '%'
                            }
                        }
                    });

                    option.series[1].data.forEach((item)=>{
                        if(value1 == 0){
                            this.objPie1[item.name] = '0%'
                        }else {
                            if(String(Number(item.value) / value1 * 100 ).indexOf(".") == -1){
                                this.objPie1[item.name] = Number(item.value) / value1 * 100 + '%'
                            }else {
                                this.objPie1[item.name] = (Number(item.value) / value1 * 100).toFixed(2) + '%'
                            }
                        }
                    });

                    if (option && typeof option === 'object') {
                        myChart.setOption(option);
                    }
                }
            },
            setLineChart(myChart,dates,data,color){
                let option;
                option = {
                    title: {
                        text: ''
                    },
                    color:color,
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        padding: [
                            0,  // 上
                            0, // 右
                            2,  // 下
                            0, // 左
                        ],
                        data: []
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: []
                };

                if(dates){
                    dates.forEach((item)=>{
                        option.xAxis.data.push(item)
                    })
                }
                if(data){
                    data.forEach((item)=>{
                        option.series.push({
                            name: item.name,
                            data: item.data,
                            type: 'line',
                            stack: 'Total',
                        });
                        option.legend.data.push(item.name)
                    })
                }

                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }
            },
            initChart3(dates,data){
                let dom = document.getElementById("chart3");
                let myChart = echarts.init(dom);
                let color = ['#6E85CF','#6E9ECF', '#97BFE7', '#B1D5F9', '#FCDB55', '#F1C40B', '#96ECB6', '#7DDB9F'];
                this.setLineChart(myChart,dates,data,color)
            },
            initChart4(dates,data){
                let dom = document.getElementById("chart4");
                let myChart = echarts.init(dom);
                let color = ['#975FE5','#FCDB55', '#54D3D3', '#F47A8F', '#57AFFF', '#81C4FF', '#F494FF', '#79EFE3'];
                this.setLineChart(myChart,dates,data,color)
            }
        }
    }
</script>

<style lang="scss">
    .integralStatistics{
        .title{
            height: 54px;line-height: 54px;padding: 0 9px 0 24px
        }
    }

    @media screen and (max-width: 1500px) {
        .el-col-8{
            width: 100% !important;
        }
        .el-col-16{
            width: 100% !important;
        }
    }

</style>